<div class="serviceMonitor">
  <!-- <el-row>
    <el-col :span="14">
      <span class="rate">刷新时间：{{ currentTime }}</span>
      <span class="rate">刷新频率:</span>
      <div class="select">
        <yu-xselect :options="frequencyOptions" v-model="timerDelay" @change="frequencyChangeFn" :clearable="false">
        </yu-xselect>
      </div>
    </el-col>
    <el-col :span="10" style="text-align: left;padding-left: 50px;">
      <yu-button-group>
        <yu-button type="primary" @click="btnRefreshWorkFlowFn">刷新</yu-button>
        <yu-button type="primary" @click="btnStartAllWorkFlowFn">全部启动</yu-button>
        <yu-button type="primary" @click="btnStopAllWorkFlowFn">全部停止</yu-button>
      </yu-button-group>
    </el-col>
  </el-row>
  <yu-tabs type="border-card" v-model="tabsValue">
    <yu-tab-pane label="图形" name="mxgraph" :disabled="disabledTabPane">
      <yu-workflow-server v-if="tabsValue == 'mxgraph'" :height="height - 12" view-type="view" work-type="serviceModule" @celldblclick="celldblclickFn"
        @overlayclick="overLayClickFn" ref="workflow">
      </yu-workflow-server>
    </yu-tab-pane>
    <yu-tab-pane label="树形" name="xtree" :style="{'min-height': height + 'px'}" :disabled="disabledTabPane">
      <ul class="server-type-explain-box">
        <li>
          <span class="server-type-explain server-type-S">中央监控</span>
          <span class="server-type-explain server-type-C">调度引擎</span>
          <span class="server-type-explain server-type-A">集群代理</span>
          <span class="server-type-explain server-type-N">执行节点</span>
        </li>
        <li>
          <span class="node-icon ON"></span>
          <span class="state-explain">已启动</span>
          <span class="node-icon OFF"></span>
          <span class="state-explain">已停止</span>
          <span class="node-icon stoping"></span>
          <span class="state-explain">部分停止</span>
        </li>
      </ul>
      <yu-input placeholder="请输入关键字进行过滤" v-model="filterText"></yu-input>
	    <yu-xtree ref="moduleTree" :local-data="baseData" data-id="serverId" data-label="label" data-pid="parentId" :data-root="rootId" :height="height - 62"
        :default-expand-all="true" @node-dbclick="nodeDbclick" :expand-on-click-node="false" :filter-node-method="filterNode" :render-custom-content="renderCustomContent">
      </yu-xtree>
    </yu-tab-pane>
  </yu-tabs> -->
  <div :style="{'height': height + 'px', 'padding': '16px'}">
    <div class="hand-box">
      <span class="rate">已启动：{{ stateOn.length }}</span>
      <span class="rate">已停止：{{ stateOff.length }}</span>
      <span class="rate">部分停止：{{ stateStoping.length }}</span>
      <span class="rate">刷新时间：{{ currentTime }}</span>
      <span class="rate">刷新频率:</span>
      <div class="select">
        <yu-xselect :options="frequencyOptions" v-model="timerDelay" @change="frequencyChangeFn" :clearable="false">
        </yu-xselect>
      </div>
      <yu-button-group>
        <yu-button type="primary" @click="btnRefreshWorkFlowFn">刷新</yu-button>
        <yu-button type="primary" @click="btnStartAllWorkFlowFn">全部启动</yu-button>
        <yu-button type="primary" @click="btnStopAllWorkFlowFn">全部停止</yu-button>
      </yu-button-group>
    </div>
    <yu-input placeholder="请输入关键字进行过滤" v-model="filterText"></yu-input>
    <yu-xtree ref="moduleTree" :local-data="baseData" data-id="serverId" data-label="label" data-pid="parentId" :data-root="rootId"
      :height="height - 120" :default-expand-keys="[rootId]" @node-dbclick="nodeDbclick" :expand-on-click-node="false" :filter-node-method="filterNode"
      :render-custom-content="renderCustomContent">
    </yu-xtree>
    <ul class="server-type-explain-box">
      <li>
        <span class="server-type-explain server-type-S">中央监控</span>
        <span class="server-type-explain server-type-C">调度引擎</span>
        <span class="server-type-explain server-type-A">集群代理</span>
        <span class="server-type-explain server-type-N">执行节点</span>
      </li>
      <li>
        <span class="node-icon ON point" @click="showStatus('ON')" ></span>
        <span class="state-explain" >已启动</span>
        <span class="node-icon OFF point" @click="showStatus('OFF')"></span>
        <span class="state-explain" >已停止</span>
        <span class="node-icon stoping"></span>
        <span class="state-explain">部分停止</span>
      </li>
    </ul>
  </div>
  <yu-xdialog title="模块信息" :visible.sync="dialogTableVisible" width="75%" close="hidePopWindow">
    <yu-tabs type="border-card" v-model="activeTabName" v-loading="infoLoading">
      <yu-tab-pane label="基本信息" name="basicInfo">
        <yu-xform ref="serviceForm" label-width="125px" v-model="serviceFormData" :disabled="true">
          <yu-xform-group :column="2">
            <yu-xform-item label="服务模块代码" ctype="input" name="serverId"></yu-xform-item>
            <yu-xform-item label="服务模块名称" ctype="input" name="serverName" required></yu-xform-item>
            <yu-xform-item label="端口" ctype="input" name="srvPort" required></yu-xform-item>
          </yu-xform-group>
          <yu-xform-group :column="1">
            <yu-xform-item label="服务模块部署" label-width="125px" ctype="custom" name="custom">
              <template>
                <yu-button-group style="margin-bottom:1em;">
                  <yu-button type="primary" @click="serverStartFn">启动</yu-button>
                  <yu-button type="primary" @click="serverStopFn">停止</yu-button>
                </yu-button-group>
                <yu-xtable ref="deployTable" style="width: 100%" :data="deployList" height="150" :pageable="false">
                  <yu-xtable-column prop="location" label="部署位置"></yu-xtable-column>
                  <yu-xtable-column prop="status" :options="deployStatus" label="状态"></yu-xtable-column>
                </yu-xtable>
              </template>
            </yu-xform-item>
          </yu-xform-group>
          <yu-xform-group :column="2">
            <yu-xform-item label="备注" colspan="24" name="remark" ctype="textarea"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
        <div style="text-align:center;">
          <yu-button-group>
            <yu-button @click='hidePopWindow'>关闭</yu-button>
          </yu-button-group>
        </div>
      </yu-tab-pane>
      <yu-tab-pane label="参数信息" name="paramInfo" v-if="showParamInfo" v-loading="paramLoading">
        <yu-xtable ref="paramsTab" :pageable="false" :data="paramcfgDatas" style="width: 100%" max-height="350">
          <yu-xtable-column prop="serverId" label="节点编号"></yu-xtable-column>
          <yu-xtable-column prop="serverName" label="节点名称"></yu-xtable-column>
          <yu-xtable-column prop="paramValue" label="当前并发数"></yu-xtable-column>
          <yu-xtable-column prop="paramValueC" ctype="input" label="最大并发数" maxlength="250"></yu-xtable-column>
        </yu-xtable>

        <div style="text-align:center;margin-top:1em;">
          <yu-button type="primary" @click="saveParams" style="margin-left: 8px">保存</yu-button>
          <yu-button @click='hidePopWindow' style="margin-left: 8px">关闭</yu-button>
        </div>
      </yu-tab-pane>
    </yu-tabs>
  </yu-xdialog>
</div>
<style>
  .serviceMonitor .el-tree-node__content .node-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .server-type-explain-box .node-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: bottom;
  }

  .serviceMonitor .el-tree-node__content .node-icon.ON,
  .server-type-explain-box .node-icon.ON {
    background: url(libs/mxgraph/images/overlays/status_success.png) center no-repeat;
  }

  .serviceMonitor .el-tree-node__content .node-icon.OFF,
  .server-type-explain-box .node-icon.OFF {
    background: url(libs/mxgraph/images/overlays/status_stop.png) center no-repeat;
  }

  .serviceMonitor .el-tree-node__content .node-icon.stoping,
  .server-type-explain-box .node-icon.stoping {
    background: url(libs/mxgraph/images/overlays/status_exception.png) center no-repeat;
  }

  .serviceMonitor .hand-box {
    margin: 0 0 16px;
  }

  .serviceMonitor .hand-box .el-button-group {
    vertical-align: top;
  }
  .point{
	  cursor: pointer;
  }
</style>
